$(function(){

	var callbacks = $.Callbacks();
	callbacks.add(bindToggleEvents);
	callbacks.add(bindClockEvents);
	callbacks.add(bindProgressBarEvents);
	callbacks.add(bindRowTitle);
	callbacks.add(initPerspective);
	callbacks.add(initBallSystem);
	callbacks.fire();

	function bindToggleEvents(){
		$('span[class*=glyphicon-triangle]').each(function(index, ele){
			$(ele).click(function(){
				if ($(this).hasClass('glyphicon-triangle-top')){
					$(this).removeClass('glyphicon-triangle-top').addClass("glyphicon-triangle-bottom");
					$(this).parents('.panel-heading').nextAll().slideUp();
				}else{
					$(this).removeClass('glyphicon-triangle-bottom').addClass("glyphicon-triangle-top");
					$(this).parents('.panel-heading').nextAll().slideDown();
				}
			})
		});
	}

	function bindClockEvents(){
		var canvas = $(".clock canvas").first()[0];
		var clock = new Clock({canvas:canvas, second:30, minute:5, hour:11});
		$('button:contains("start")', $('.clock')).first().click(function(){
			clock.start();
		})
		$('button:contains("stop")', $('.clock')).first().click(function(){
			clock.stop();
		})
	}	

	function bindProgressBarEvents(){
		$('button:contains("start")', $('.progressbar')).click(function(){
			$('.progress-bar').each(function(index, ele){
				$(ele).css('width','100%');
			});
		})
		$('button:contains("stop")', $('.progressbar')).click(function(){
			$('.progress-bar').each(function(index, ele){
				var value = Math.random()*100;
				$(ele).css('width',value);
			});
		})
	}

	function bindRowTitle(){
		$('.row').each(function(index, ele){
			$(ele).find('.panel-heading > label').html("demo "+(index+1));
		});
	}
	
	function initPerspective(){
    	var canvas = $('canvas', $('.perspective'))[0];
    	var ctx = canvas.getContext('2d');
    	var origin = {x: canvas.width/2, y:canvas.height/2};
    	var fl = 250;
    	var rects = [ {x:60, y:60, w:30, h:30, z:0},
    				  {x:60, y:60, w:30, h:30, z:100},
    				  {x:60, y:60, w:30, h:30, z:300},
    				  {x:60, y:60, w:30, h:30, z:500},
    				  {x:60, y:60, w:30, h:30, z:700},
    				  {x:60, y:60, w:30, h:30, z:900},
    				  {x:60, y:60, w:30, h:30, z:2500},
    				  {x:60, y:60, w:30, h:30, z:3500}
    	];

    	function draw(){
    		//x-axis
    		ctx.beginPath();
    		ctx.strokeStyle = 'green';
    		ctx.moveTo(0, origin.y);
    		ctx.lineTo(canvas.width, origin.y);
    		ctx.stroke();
    		//y-axis
    		ctx.beginPath();
    		ctx.strokeStyle = 'red';
    		ctx.moveTo(origin.x, 0);
    		ctx.lineTo(origin.x, canvas.height);
    		ctx.stroke();

    		for (var i=0; i<rects.length; i++){
    			ctx.beginPath();
    			var rect3d = rects[i];
    			var rect2d = doPerspective(rect3d);
    			ctx.rect(origin.x+rect2d.x, origin.y+rect2d.y, rect2d.w, rect2d.h);
    			ctx.fill();
    		}
    	}
    	/* return rect2d after perspective */
    	function doPerspective(rect3d){
    		var scale = fl / (fl + rect3d.z);
    		var x2d = rect3d.x * scale;
    		var y2d = rect3d.y * scale;
    		var w2d = rect3d.w * scale;
    		var h2d = rect3d.h * scale;
    		return {x: x2d, y: y2d, w: w2d, h: h2d};
    	}
		draw();
	}

	function initBallSystem(){
    	//system
    	var start = false;
    	var aid = 0;
    	var canvas = $('canvas', $('.ball'))[0];
    	var ctx = canvas.getContext('2d');
    	//ball
    	var x=10;
    	var y=40;
    	var vx = 1;
    	var vy = 4;
    	var radius = 10;
    	var easing = 0.04;
    	
    	ctx.arc(x, y, radius, 0, Math.PI*2);
    	ctx.fill();

    	function drawBall(){
    		ctx.clearRect(0, 0, canvas.width, canvas.height);
    		ctx.beginPath();
    		ctx.arc(x, y, radius, 0, Math.PI*2);
    		ctx.fill();
    	}
    	
    	function animation(){
    		if (!start)
    			return;

    		if (x + radius > canvas.width){
    			vx *= -1;
    			vy *= -1;
    			x = canvas.width - radius;
    			console.log("hit right bound");
    		}else if (x < radius){
    			vx *= -1;
    			vy *= -1;
    			x = radius;
    			console.log('hit left bound');
    		}else{
    			if (vx > 0){
    				x += vx + easing*(canvas.width-x);
    				y += vy;
    				console.log("move right")
    			}else{
    				x += vx - easing*x;
    				y += vy;
    				console.log("move left")
    			}
    		}

    		drawBall();
    		
    		/*aid = setTimeout(function(){
    			animation();
    		}, 16);*/
			aid = requestAnimationFrame(animation);
    		
    	}
    	
    	$('button:contains("start")', $('.ball')).click(function(){
    		if (!start){
    			start = true;
    			animation();
    		}
    		
    	});
    	$('button:contains("stop")', $('.ball')).click(function(){
    		start = false;
    		//clearTimeout(aid);
    		cancelAnimationFrame(aid);
    	});
	}
});